<template>
  <div class="section">
    <div class="title-box flex">
      <p>编辑活动</p>
      <el-button type="primary" size="small" @click="install">保存设置</el-button>
    </div>

    <div class="centent-box">
      <div class="phone-wrapper flex">
        <!-- 手机模型 -->
        <div class="phone-box">
          <img src="https://yunyi.ublue.xyz/admin/webSystem/phone2.png" alt="">
          <div class="flex-d commonData-box">
            <div class="commonData" v-for="(item,index) in commonDataCOM" :key="item.id">

              <!-- 商品 -->
              <div class="commonData-goods flex-d" :id="item.id" v-if="item.type=='goods'">
                <div class="flex commonData-goods-centent">
                  <img :src="item.img" alt="" v-if="item.img">
                  <div class="img" v-if="!item.img"></div>
                  <div class="flex-d commonData-goods-centent-info">
                    <p class="p1">{{item.name}}</p>
                    <div style="margin-bottom:1rem">
                      <p class="p2" v-if="item.skillnumber">已抢{{item.skillnumber}}件，仅剩{{item.number}}件</p>
                      <p class="p2" v-if="item.number && !item.skillnumber">仅剩{{item.number}}件</p>
                      <p class="p3" v-if="item.skillMoney"> <span
                          style="text-decoration: line-through">￥{{item.money}}</span>
                        <span style="color:#ec0807">￥{{item.skillMoney}}</span>
                      </p>
                      <p class="p3" v-if=" item.money && !item.skillMoney">
                        <span style="color:#ec0807">￥{{item.money}}</span>
                      </p>
                    </div>
                  </div>
                </div>
                <el-button class="commonData-goods-centent-button" round>立即秒杀</el-button>
              </div>

              <!-- 广告 -->
              <div class="commonData-ad flex-d" :id="item.id" v-if="item.type=='ad'"
                v-bind:class="{'commonData-isAd':item.file.url}">
                <el-image class="flex" style="width: 100%; height: auto" :src="item.file.url"
                  :preview-src-list="item.fileList" fit="cover">
                  <div slot="error" class="image-slot flex" style="width:100%; height: auto">
                    <i class="el-icon-picture-outline" style="font-size: 10rem;"></i>
                  </div>
                </el-image>
              </div>

              <!-- 视频 -->
              <div class="commonData-video flex-d" :id="item.id" v-if="item.type=='video'"
                v-bind:class="{'commonData-isVideo':item.file.url}">
                <video :src="item.file.url" controls></video>
              </div>

              <!-- 表单 -->
              <div class="commonData-input flex-d" :id="item.id" v-if="item.type=='form'">
                <p class="form-title">
                  {{item.formTitle?item.formTitle:'表单标题名称'}}
                </p>

                <el-form :model="item" :ref="item.id" style="width:100%">
                  <div class="box-card">

                    <el-form-item :label="item2.modTitle?item2.modTitle:'标题框名称'"
                      v-for="(item2, index2) in item.formModule" :key="index2"
                      :prop=" 'formModule.' + index2 + '.modVal'" :rules="item2.modFillIn==true?item2.modRules:{}">
                      <el-input v-if="item2.modType=='单行输入'" style="margin-left:0" v-model="item2.modVal"
                        :placeholder="item2.modPlaceholder?item2.modPlaceholder:'请输入内容'" clearable>
                      </el-input>
                      <el-input v-if="item2.modType=='多行输入'" style="margin-left:0" v-model="item2.modVal"
                        :placeholder="item2.modPlaceholder?item2.modPlaceholder:'请输入内容'" clearable type="textarea"
                        :autosize="{ minRows: 3, maxRows: 3}">
                      </el-input>
                      <el-select v-else-if="item2.modType=='下拉选择'" v-model="item2.modVal"
                        :placeholder="item2.modPlaceholder?item2.modPlaceholder:'请选择内容'" class="input-input"
                        style="margin-left:0;width:100%">
                        <el-option v-for="(item3,index3) in item2.modArray" :key="index3"
                          :label="item3.label?item3.label:'下拉'+[index3+1]" :value="item3.value">
                        </el-option>
                      </el-select>
                      <el-radio-group v-else-if="item2.modType=='单选'" v-model="item2.modVal">
                        <el-radio v-for="(item3,index3) in item2.modArray" :key="index3"
                          :label="item3.label?item3.label:'单选'+[index3+1]">
                        </el-radio>
                      </el-radio-group>
                      <el-checkbox-group v-else-if="item2.modType=='多选'" v-model="item2.modValArray">
                        <el-checkbox v-for="(item3,index3) in item2.modArray" :key="index3"
                          :label="item3.label?item3.label:'多选'+[index3+1]">
                        </el-checkbox>
                      </el-checkbox-group>
                      <el-input v-else-if="item2.modType=='手机号'" style="margin-left:0" v-model="item2.modVal"
                        :placeholder="item2.modPlaceholder?item2.modPlaceholder:'请输入手机号'" clearable>
                      </el-input>
                    </el-form-item>
                    <el-form-item class="flex btn">
                      <el-button type="primary" @click="formSubmit(item)">
                        {{item.formSubmit?item.formSubmit:'提交按钮名称'}}</el-button>
                    </el-form-item>

                    <el-form-item v-if="item.inputType == '文本'||item.inputType == '姓名'"
                      :prop=" 'commonData.' + index + '.val'" :rules="item.fillIn==1?rules.name:{}">
                      <el-input style="margin-left:0" v-model="item.val" placeholder="请输入内容" clearable>
                      </el-input>
                    </el-form-item>
                    <el-form-item v-if="item.inputType == '电话'" :prop=" 'commonData.' + index + '.val'"
                      :rules="item.fillIn==1?rules.phone:{}">
                      <el-input v-model="item.val" maxlength="11" placeholder="请输入内容" clearable style="margin-left:0">
                      </el-input>
                    </el-form-item>
                    <el-form-item v-if="item.inputType == '日期'" :prop=" 'commonData.' + index + '.val'"
                      :rules="item.fillIn==1?rules.date1:{}">
                      <el-date-picker type="date" placeholder="选择日期" v-model="item.val"
                        style="width: 100%;margin-left:0" clearable>
                      </el-date-picker>
                    </el-form-item>
                    <el-form-item v-if="item.inputType == '下拉框'" :prop=" 'commonData.' + index + '.val'"
                      :rules="item.fillIn==1?rules.select:{}">
                      <el-select v-model="item.selectVal" placeholder="请选择" class="input-input"
                        style="margin-left:0;width:100%">
                        <el-option v-for="(item2,index) in item.selectArray" :key="index"
                          :label="item2.label?item2.label:'下拉'+[index+1]" :value="item2.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item v-if="item.inputType == '单选'" :prop=" 'commonData.' + index + '.val'"
                      :rules="item.fillIn==1?rules.resource:{}">
                      <el-radio-group v-model="item.val">
                        <el-radio v-for="(item2,index) in item.modArray" :key="index"
                          :label="item2.label?item2.label:'单选'+[index+1]">
                        </el-radio>
                      </el-radio-group>
                    </el-form-item>
                    <el-form-item v-if="item.inputType == '多选'" :prop=" 'commonData.' + index + '.val'"
                      :rules="item.fillIn==1?rules.checkbox:[]">
                      <el-checkbox-group v-model="item.val">
                        <el-checkbox v-for="(item2,index) in item.chcekboxArray" :key="index"
                          :label="item2.chcekboxVal?item2.chcekboxVal:'多选'+[index+1]"></el-checkbox>
                      </el-checkbox-group>
                    </el-form-item>

                  </div>
                </el-form>
              </div>

            </div>
          </div>
        </div>

        <!-- 编辑器设置 -->
        <div class=" editor-box">
          <div class="title-box">组件设置
            <!-- <span>&nbsp;&nbsp;&nbsp;&nbsp;秒杀后3分钟内未付款则视为秒杀失败</span> -->
          </div>

          <div class="editor-info">

            <div class="editor-input flex">
              <p class="p1 flex"><span style="color:red">*</span> 秒杀时间</p>
              <el-date-picker v-model="datePicker" type="datetimerange" :picker-options="pickerOptions"
                range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="center">
              </el-date-picker>
            </div>

            <div class="editor-input flex">
              <p class="p1 flex"><span style="color:red">*</span> 每人限购</p>
              <el-input-number v-model="number" :step="1" :min="1" :max="999999999" label="个">
              </el-input-number>
              <p class="p2">个秒杀品</p>
            </div>

            <div class="editor-input editor-btn flex">
              <el-button type="primary" size="small" @click="addCommon('goods')">添加秒杀</el-button>
              <el-button type="primary" size="small" @click="addCommon('ad')">添加广告</el-button>
              <el-button type="primary" size="small" @click="addCommon('video')">添加视频</el-button>
              <el-button type="primary" size="small" @click="addCommon('form')">添加表单</el-button>
              <p class="p2">最多添加30个内容</p>
            </div>

            <div class="editor-common-box" v-bind:class="{'editor-common-box-move':isDragover}"
              @mouseover="isDragover = false">
              <div class="editor-common" @drop="commonDragDrop(item.id)" @dragover="commonDragOver($event)"
                @dragstart="commonDragStart(item.id)" draggable="true" v-for="item in commonDataCOM"
                v-bind:key="item.id">
                <div class="editor-common-goods" :id="item.id" v-if="item.type=='goods'">
                  <el-button type="danger" icon="el-icon-close" circle class="iconbtn" size="mini"
                    @click="delCommon(item.id)"></el-button>
                  <p>秒杀</p>

                  <div class="goods-info flex" v-if="!item.name">
                    <div class="goods-info-left flex">
                      <img src="https://yunyi.ublue.xyz/admin/webSystem/skill_item_icon.6901c65.png" alt="">
                      <div class="text flex-d">
                        <p>秒杀商品名称</p>
                        <span>￥售价</span>
                      </div>
                    </div>

                    <div class="goods-info-right flex">
                      <el-button class="btn" type="primary" size="small" @click="checkGoodsMask = true;checkGood=item">
                        选择商品</el-button>
                    </div>
                  </div>

                  <div v-else>
                    <div class="goods-info flex">
                      <div class="goods-info-left flex">
                        <img :src=item.img alt="">
                        <div class="text flex-d">
                          <p>{{item.name}}</p>
                          <span>￥{{item.money}}</span>
                        </div>
                      </div>
                      <div class="goods-info-right flex">
                        <span class="span" style="margin-right:2rem">设置秒杀价</span>
                        <el-input-number v-model="item.skillMoney" :min="0" :max="item.money" placeholder="请输入"
                          style="width:30%" label="描述文字">
                        </el-input-number>
                        <span class="span" style="margin:0 3rem 0 2rem">元</span>
                        <el-button type="primary" class="btn" size="small"
                          @click="checkGoodsMask = true;checkGood=item">
                          替换商品
                        </el-button>

                      </div>

                    </div>
                    <el-divider></el-divider>
                    <div class="flex" style="justify-content: space-evenly;">
                      <div>
                        <span class="span" style="margin-right:2rem">限量</span>
                        <el-input-number v-model="item.number" placeholder="请输入" style="width:15rem" label="描述文字">
                        </el-input-number>
                        <span class="span" style="margin:0 3rem 0 2rem">个</span>
                      </div>
                      <div>
                        <span class="span" style="margin:0 2rem 0 2rem">虚拟秒杀</span>
                        <el-input-number v-model="item.skillnumber" :min="0" :max="item.number" placeholder="请输入"
                          style="width:15rem" label="描述文字">
                        </el-input-number>
                        <span class="span" style="margin:0 3rem 0 2rem">个</span>
                      </div>
                    </div>
                  </div>

                  <el-dialog title="内容详情" :visible.sync="checkGoodsMask" width="600px">
                    <div class="dialog-input flex">
                      <p class="p1 flex"><span style="color:red">*</span> 产品类型：</p>
                      <el-select v-model="checkGoodsValue" filterable placeholder="请选择" size="small"
                        @change="typeSelectChange()">
                        <el-option v-for="item in checkGoodsOptions" :key="item.value" :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                    </div>
                    <div class="dialog-input flex">
                      <p class="p1 flex"><span style="color:red">*</span> 选择产品：</p>
                      <el-select v-model="checkGoodsValueSon" filterable placeholder="请选择产品" size="small">
                        <el-option v-for="item in checkGoodsOptionsSon" :key="item.value" :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                    </div>
                    <span slot="footer" class="dialog-footer">
                      <el-button @click="checkGoodsMask = false" size="small">取 消</el-button>
                      <el-button type="primary" @click="goodsSelectBtn" size="small">确认选择</el-button>
                    </span>
                  </el-dialog>

                </div>

                <div class="editor-common-ad" :id="item.id" v-if="item.type=='ad'">
                  <el-button type="danger" icon="el-icon-close" circle class="iconbtn" size="mini"
                    @click="delCommon(item.id)"></el-button>
                  <p><span>广告</span> <span>宽度295px，高度自适应</span></p>

                  <div class="goods-info flex">
                    <div class="goods-info-left flex">

                      <el-upload action="#" list-type="picture-card" :auto-upload="false" :ref="'elUpload'+item.id"
                        :limit=1 :on-change="(file, fileList)=>adAddNone(file, fileList,item)">
                        <i slot="default" class="el-icon-plus" :id="'iSlot'+item.id"></i>
                        <div slot="file" slot-scope="{file}">
                          <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                          <span class="el-upload-list__item-actions">
                            <span class="el-upload-list__item-preview" @click="adPictureCardPreview(file)">
                              <i class="el-icon-zoom-in"></i>
                            </span>
                            <span class="el-upload-list__item-delete" @click="adRemove(item)">
                              <i class="el-icon-delete"></i>
                            </span>
                          </span>
                        </div>
                      </el-upload>
                      <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="">
                      </el-dialog>

                    </div>
                    <div class="goods-info-right flex">
                      <el-input class="adinput" placeholder="" v-model="item.url" :disabled="true" v-if="item.url">
                      </el-input>
                      <el-button class="btn" type="primary" size="small" @click="checkAdMask = true;">
                        选择跳转</el-button>
                    </div>
                  </div>

                  <el-dialog title="内容详情" :visible.sync="checkAdMask" width="600px">
                    <div class="dialog-input flex">
                      <p class="p1 flex"><span style="color:red">*</span> 链接地址：</p>
                      <el-input v-model="item.url" placeholder="http:// 或 https://"></el-input>
                    </div>
                    <span slot="footer" class="dialog-footer">
                      <el-button @click="checkAdMask = false" size="small">取 消</el-button>
                      <el-button type="primary" @click="adSelectBtn(item)" size="small">确认选择</el-button>
                    </span>
                  </el-dialog>
                </div>

                <div class="editor-common-video" :id="item.id" v-if="item.type=='video'">
                  <el-button type="danger" icon="el-icon-close" circle class="iconbtn" size="mini"
                    @click="delCommon(item.id)"></el-button>
                  <p><span>视频</span> <span> </span></p>

                  <div class="goods-info flex">
                    <div class="goods-info-left video-info-left flex">

                      <el-upload action="#" list-type="picture-card" :auto-upload="false" :ref="'elUpload'+item.id"
                        :limit=1 :on-change="(file, fileList)=>adAddNone(file, fileList,item)">
                        <i slot="default" class="el-icon-plus" :id="'iSlot'+item.id"></i>
                        <div slot="file" slot-scope="{file}" style="width:100%;height:100%;">
                          <video class="el-upload-list__item-thumbnail" :src="file.url" style="width:auto;"></video>
                          <span class="el-upload-list__item-actions">
                            <span class="el-upload-list__item-preview" @click="adPictureCardPreview2(file)">
                              <i class="el-icon-zoom-in"></i>
                            </span>
                            <span class="el-upload-list__item-delete" @click="adRemove(item)">
                              <i class="el-icon-delete"></i>
                            </span>
                          </span>
                        </div>
                        <div class="goods-info-right video-info-right flex">
                          <el-button class="btn" type="primary" size="small">上传视频</el-button>
                        </div>
                      </el-upload>
                      <el-dialog :visible.sync="dialogVisible2">
                        <video width="100%" :src="dialogImageUrl" controls></video>
                      </el-dialog>

                    </div>

                  </div>

                </div>

                <div class="editor-common-input" :id="item.id" v-if="item.type=='form'">
                  <el-button type="danger" icon="el-icon-close" circle class="iconbtn" size="mini"
                    @click="delCommon(item.id)"></el-button>

                  <div class="form-box">
                    <div class="title-box">表单设置</div>
                    <div class="input-info flex-d">
                      <div class="input-box flex">
                        <p class="p1">表单标题</p>
                        <el-input placeholder="表单标题名称" v-model="item.formTitle" clearable class="input-input"
                          size="small">
                        </el-input>
                      </div>
                      <!-- <div class="input-box flex">
                      <p class="p1">类型</p>
                      <el-select v-model="item.inputType" placeholder="请选择" class="input-input" size="small"
                        @change="inputSelectChange(item)">
                        <el-option v-for="item in inputOptions" :key="item.value" :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                    </div> -->
                      <!-- <div class="input-box flex">
                      <p class="p1">是否必填</p>
                      <div class="input-input" style="margin-left:2rem">
                        <el-radio v-model="item.fillIn" label="1" size="small">必填</el-radio>
                        <el-radio v-model="item.fillIn" label="2" size="small" @change="formReset(item)">否
                        </el-radio>
                      </div>
                    </div> -->
                      <div class="input-box flex">
                        <p class="p1">提交按钮</p>
                        <el-input placeholder="提交按钮名称" v-model="item.formSubmit" clearable class="input-input"
                          size="small">
                        </el-input>
                      </div>
                      <!-- <div class="input-box flex" v-if="item.inputType =='下拉框'">
                      <p class="p1">下拉框</p>
                      <div class="flex input-input" style="justify-content: flex-start;">
                        <el-button type="primary" icon="el-icon-plus" style="margin:0 2rem" @click="selectAdd(item)">
                        </el-button>
                        <div class=" radio-box grid">
                          <el-input :placeholder="'下拉'+[index+1]" v-for="(item2,index) in item.selectArray" :key="index"
                            v-model="item2.label" clearable class="input-input" size="small" @input="$forceUpdate()">
                          </el-input>
                        </div>
                      </div>
                    </div>
                    <div class="input-box flex" v-if="item.inputType =='单选'">
                      <p class="p1">单选内容</p>
                      <div class="flex input-input" style="justify-content: flex-start;">
                        <el-button type="primary" icon="el-icon-plus" style="margin:0 2rem" @click="radioAdd(item)">
                        </el-button>
                        <div class=" radio-box grid">
                          <el-input :placeholder="'单选'+[index+1]" v-for="(item2,index) in item.radioArray" :key="index"
                            v-model="item2.radioVal" clearable class="input-input" size="small" @input="$forceUpdate()">
                          </el-input>
                        </div>
                      </div>
                    </div>
                    <div class="input-box flex" v-if="item.inputType =='多选'">
                      <p class="p1">多选内容</p>
                      <div class="flex input-input" style="justify-content: flex-start;">
                        <el-button type="primary" icon="el-icon-plus" style="margin:0 2rem" @click="chcekboxAdd(item)">
                        </el-button>
                        <div class=" radio-box grid">
                          <el-input :placeholder="'多选'+[index+1]" v-for="(item2,index) in item.chcekboxArray"
                            :key="index" v-model="item2.chcekboxVal" clearable class="input-input" size="small"
                            @input="$forceUpdate()">
                          </el-input>
                        </div>
                      </div>
                    </div> -->
                    </div>
                  </div>
                  <div class="form-box">
                    <div class="title-box title-box2">添加组件</div>
                    <div class="input-info input-info-add flex">
                      <el-button type="primary" size="small" plain @click="formModuleAdd(item,'单行输入')">单行输入</el-button>
                      <el-button type="primary" size="small" plain @click="formModuleAdd(item,'多行输入')">多行输入</el-button>
                      <el-button type="primary" size="small" plain @click="formModuleAdd(item,'下拉选择')">下拉选择</el-button>
                      <el-button type="primary" size="small" plain @click="formModuleAdd(item,'单选')">单选</el-button>
                      <el-button type="primary" size="small" plain @click="formModuleAdd(item,'多选')">多选</el-button>
                      <el-button type="primary" size="small" plain @click="formModuleAdd(item,'手机号')">手机号</el-button>
                    </div>
                  </div>
                  <div class="form-box">
                    <div class="title-box title-box2">编辑组件</div>
                    <div class="input-info flex-d" v-bind:class="{'editor-common-box-move':isDragover}"
                      @mouseover="isDragover = false">

                      <div class="setInput-box flex-d" @drop="formDragDrop(item,index2)"
                        @dragover="formDragOver($event,item)" @dragstart="formDragStart(item,index2)" draggable="true"
                        v-for="(item2,index2) in item.formModule" :key="index2">
                        <div class="setInput-centent flex" style="margin-bottom:1rem;">
                          <div class="setInput-centent-left flex">
                            <div class="setInput-modType">【{{item2.modType}}】</div>
                            <el-input v-model="item2.modTitle" placeholder="标题框名称" clearable class="setInput-modTitle"
                              size="small">
                            </el-input>
                          </div>
                          <div class="setInput-centent-right flex">
                            <el-checkbox class="setInput-modFillIn" @change="formReset(item,item2)"
                              v-model="item2.modFillIn">
                              必填</el-checkbox>
                            <el-button type="danger" icon="el-icon-close" circle class="iconbtn" size="mini"
                              @click="formModuleDel(item,index2)"></el-button>
                          </div>
                        </div>
                        <div class="setInput-centent">
                          <div class="input-box flex" v-if="item2.modType =='单行输入'">
                            <el-input :placeholder="item2.modPlaceholder?item2.modPlaceholder:'请输入内容'" clearable
                              class="input-input" size="small" v-model="item2.modPlaceholder">
                            </el-input>
                          </div>
                          <div class="input-box flex" v-if="item2.modType =='多行输入'">
                            <el-input :placeholder="item2.modPlaceholder?item2.modPlaceholder:'请输入内容'" clearable
                              class="input-input" size="small" v-model="item2.modPlaceholder">
                            </el-input>
                          </div>
                          <div class="input-box flex-d" v-if="item2.modType =='下拉选择'">
                            <el-input :placeholder="item2.modPlaceholder?item2.modPlaceholder:'请选择内容'" clearable
                              class="input-input" size="small" v-model="item2.modPlaceholder">
                            </el-input>
                            <div class="flex input-input"
                              style="justify-content: flex-start;width: 100%;padding-top: 1rem;">
                              <el-button type="primary" icon="el-icon-plus" style="margin-right: 2rem"
                                @click="item2.modArray.push({ value: item2.modArray.length, label: '' })">
                              </el-button>
                              <div class=" radio-box grid">
                                <el-input :placeholder="'下拉'+[index3+1]" v-for="(item3,index3) in item2.modArray"
                                  :key="index3" v-model="item3.label" clearable class="input-input" size="small">
                                </el-input>
                              </div>
                            </div>
                          </div>
                          <div class="input-box flex" v-if="item2.modType =='单选'">
                            <div class="flex input-input" style="justify-content: flex-start;">
                              <el-button type="primary" icon="el-icon-plus" style="margin-right: 2rem"
                                @click="formRadioAdd(item2)">
                              </el-button>
                              <div class=" radio-box grid">
                                <el-input v-for="(item3,index3) in item2.modArray" :key="index3"
                                  :placeholder="item3.label?item3.label:'单选'+[index3+1]" clearable class="input-input"
                                  size="small" v-model="item3.label">
                                </el-input>
                              </div>
                            </div>
                          </div>
                          <div class="input-box flex" v-if="item2.modType =='多选'">
                            <div class="flex input-input" style="justify-content: flex-start;">
                              <el-button type="primary" icon="el-icon-plus" style="margin-right: 2rem"
                                @click="formChcekboxAdd(item2)">
                              </el-button>
                              <div class=" radio-box grid">
                                <el-input v-for="(item3,index3) in item2.modArray" :key="index3"
                                  :placeholder="item3.label?item3.label:'多选'+[index3+1]" clearable class="input-input"
                                  size="small" v-model="item3.label">
                                </el-input>
                              </div>
                            </div>
                          </div>
                          <div class="input-box flex" v-if="item2.modType =='手机号'">
                            <el-input :placeholder="item2.modPlaceholder?item2.modPlaceholder:'请输入手机号'" clearable
                              class="input-input" size="small" v-model="item2.modPlaceholder">
                            </el-input>
                          </div>
                        </div>
                      </div>

                    </div>
                  </div>
                </div>

              </div>
            </div>

          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<style lang="less" scoped src="./marketingEditor.less">

</style>
<script>
export default {
  name: 'marketing-editor',

  data() {
    return {
      // 秒杀时间选择
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < (Date.now() - 100000000);
        },
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            end.setTime(end.getTime() + 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            end.setTime(end.getTime() + 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            end.setTime(end.getTime() + 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      datePicker: '',
      // 限购
      number: 1,
      // 模块
      lowCode: { commonData: [], },
      // 模块拖拽数据
      commonDrag: {
        data: '', index: ''
      },
      isDragover: false,
      // 秒杀select
      checkGood: '',
      checkGoodsMask: false,
      checkGoodsOptions: [{
        value: 'foot',
        label: '食品'
      }, {
        value: 'goods',
        label: '商品'
      }],
      checkGoodsOptionsSon: [],
      checkGoodsValue: '',
      checkGoodsValueSon: '',
      // 广告
      checkAd: '',
      checkAdMask: false,
      dialogImageUrl: '',
      dialogVisible: false,
      dialogVisible2: false,
      // 表单验证
      rules: {
        name: [
          { required: true, message: '请输入文本', trigger: 'blur' },
          { min: 1, message: '长度在 1 到 n 个字符', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          {
            pattern: /^((0\d{2,3}-\d{7,8})|(1[3456789]\d{9}))$/,
            message: '请输入正确的手机号码或者座机号',
          },
        ],
        date1: [
          { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        ],
        resource: [
          { required: true, message: '请至少选择一个选项', trigger: 'change' }
        ],
        checkbox: [
          { type: 'array', required: true, message: '请至少选择一个多选项', trigger: 'change' }
        ],
        select: [
          { required: true, message: '请至少选择一个选项', trigger: 'change' }
        ],
      },
      // 表单拖拽数据
      formDrag: {
        data: '', index: ''
      },
    }
  },
  computed: {
    commonDataCOM: function () {
      return this.lowCode.commonData
    },
  },
  mounted() {
    this.$api.get_schema({ activity_id: 13 }).then(e => {
      this.lowCode.commonData = JSON.parse(e.data.replaceAll("&quot;", "\""))
    })
  },
  methods: {
    /* 保存设置 */
    install() {
      this.$api.set_schema({ activity_id: 13, schema: JSON.stringify(this.lowCode.commonData) }).then(e => {
        console.log(e);
      })
    },
    /* 添加模块 */
    addCommon(params) {
      let commonData = {}
      if (params == 'goods') {
        commonData = { type: 'goods', id: 'goods' + Date.now(), number: 0, money: 0 }
      } else if (params == 'ad') {
        commonData = { type: 'ad', id: 'ad' + Date.now(), file: '', fileList: [], url: '' }
      } else if (params == 'video') {
        commonData = { type: 'video', id: 'video' + Date.now(), file: '', fileList: [] }
      } else if (params == 'form') {
        commonData = { type: 'form', id: 'form' + Date.now(), formTitle: '', formSubmit: '', formModule: [] }
      }
      this.lowCode.commonData.push(commonData)
      // console.log(this.commonData);
      // console.log(this.form);
    },
    /* 删除模块 */
    delCommon(params) {
      for (let i = 0; i < this.lowCode.commonData.length; i++) {
        if (this.lowCode.commonData[i].id == params) {
          this.lowCode.commonData.splice(i, 1)
        }
      }
    },
    /* 模块drag 记录要换的数据*/
    commonDragStart(id) {
      for (let i = 0; i < this.lowCode.commonData.length; i++) {
        if (this.lowCode.commonData[i].id == id) {
          this.commonDrag.data = this.lowCode.commonData[i]
          this.commonDrag.index = i
        }
      }
    },
    /* 运行拖拽 */
    commonDragOver(event) {
      if (this.lowCode.commonData.length > 2) {
        this.isDragover = true
      }
      event.preventDefault();
      event.dataTransfer.effectAllowed = "move";
    },
    /* 替换 记录的数据 和 要换位的数据 */
    commonDragDrop(id) {
      console.log('item.id', id);
      let _data = this.lowCode.commonData[this.commonDrag.index] // 第一个数据
      let _commonDrag = {} // 第二个数据

      for (let i = 0; i < this.lowCode.commonData.length; i++) {
        if (this.lowCode.commonData[i].id == id) {
          _commonDrag.data = this.lowCode.commonData[i]
          _commonDrag.index = i
        }
      }

      let commonData = this.lowCode.commonData
      commonData[this.commonDrag.index] = commonData[_commonDrag.index]
      commonData[_commonDrag.index] = _data
      this.lowCode.commonData = commonData
      this.$forceUpdate()
    },
    /* 秒杀产品类型选择 */
    typeSelectChange() {
      let val = this.checkGoodsValue
      if (val == 'foot') {
        this.checkGoodsOptionsSon = [{
          value: '黄金糕',
          label: '黄金糕'
        }, {
          value: '双皮奶',
          label: '双皮奶'
        }, {
          value: '蚵仔煎',
          label: '蚵仔煎'
        }, {
          value: '龙须面',
          label: '龙须面'
        }, {
          value: '北京烤鸭',
          label: '北京烤鸭'
        }]
      } else if (val == 'goods') {
        this.checkGoodsOptionsSon = [{
          value: '星颜艺美门票',
          label: '星颜艺美门票'
        }, {
          value: '红妆门票',
          label: '红妆门票'
        }]
      }
    },
    /* 秒杀确认选择 */
    goodsSelectBtn() {
      if (this.checkGoodsValueSon) {
        this.checkGood.img = 'https://yunyi.ublue.xyz/admin/webSystem/nodata.png'
        this.checkGood.name = this.checkGoodsValueSon
        this.checkGood.money = Math.floor(Math.random() * 99 + 1) + 0.99

        for (let i = 0; i < this.lowCode.commonData.length; i++) {
          if (this.lowCode.commonData[i].id == this.checkGood.id) {
            this.lowCode.commonData[i] = this.checkGood
          }
        }
        this.checkGoodsMask = false
      } else {
        this.$message({
          message: '请选择产品',
          type: 'warning'
        });
      }

    },
    /* 广告图片删除 */
    adRemove(item) {
      this.$refs[`elUpload${item.id}`][0].clearFiles()
      setTimeout(() => {
        document.getElementById(`iSlot${item.id}`).style.display = 'inline-block'
        let dom = document.getElementById(`iSlot${item.id}`).parentElement
        dom.style.width = '120px'
        dom.style.height = '120px'
      }, 1100)
    },
    /* 广告图片放大查看 */
    adPictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    adPictureCardPreview2(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible2 = true;
    },
    /* 上传按钮隐藏 */
    adAddNone(file, fileList, item) {
      console.log(this.lowCode.commonData);
      item.file = file
      item.fileList.push(file.url)
      document.getElementById(`iSlot${item.id}`).style.display = 'none'
      let dom = document.getElementById(`iSlot${item.id}`).parentElement
      dom.style.width = '0px'
      dom.style.height = '0px'
    },
    /* 广告URL确认选择 */
    adSelectBtn(item) {
      console.log(item);
      if (item.url) {
        this.checkAdMask = false
      } else {
        this.$message({
          message: '请填写链接',
          type: 'warning'
        });
      }
    },
    /* 表单组件添加 */
    formModuleAdd(item, params) {
      let mod = {}
      if (params == '单行输入') {
        mod = {
          modId: params + Date.now(), modType: '单行输入', modTitle: '', modVal: '', modFillIn: false,
          modRules: [
            { required: true, message: '请输入内容', trigger: 'blur' },
            { min: 1, message: '长度在 1 到 n 个字符', trigger: 'blur' }
          ], modPlaceholder: ''
        }
      } else if (params == '多行输入') {
        mod = {
          modId: params + Date.now(), modType: '多行输入', modTitle: '', modVal: '', modFillIn: false,
          modRules: [
            { required: true, message: '请输入内容', trigger: 'blur' },
            { min: 1, message: '长度在 1 到 n 个字符', trigger: 'blur' }
          ], modPlaceholder: ''
        }
      } else if (params == '下拉选择') {
        mod = {
          modId: params + Date.now(), modType: '下拉选择', modTitle: '', modVal: '', modFillIn: false,
          modRules: [
            { required: true, message: '请至少选择一个选项', trigger: 'change' }
          ], modArray: []
        }
      } else if (params == '单选') {
        mod = {
          modId: params + Date.now(), modType: '单选', modTitle: '', modVal: '', modFillIn: false,
          modRules: [
            { required: true, message: '请至少选择一个选项', trigger: 'change' }
          ], modArray: []
        }
      } else if (params == '多选') {
        mod = {
          modId: params + Date.now(), modType: '多选', modTitle: '', modVal: '', modFillIn: false,
          modRules: [
            { type: 'array', required: true, message: '请至少选择一个多选项', trigger: 'blur' }
          ], modArray: [], modValArray: []
        }
      } else if (params == '手机号') {
        mod = {
          modId: params + Date.now(), modType: '手机号', modTitle: '', modVal: '', modFillIn: false,
          modRules: [
            { required: true, message: '请输入手机号', trigger: 'blur' },
            {
              pattern: /^((0\d{2,3}-\d{7,8})|(1[3456789]\d{9}))$/,
              message: '请输入正确的手机号码或者座机号',
            },
          ], modPlaceholder: ''
        }
      }
      item.formModule.push(mod)
      console.log(this.lowCode.commonData);
      // this.$forceUpdate()
    },
    /* 表单组件删除 */
    formModuleDel(item, item2Index) {
      item.formModule.splice(item2Index, 1)
    },
    /* 表单drag 记录要换的数据*/
    formDragStart(item, item2Index) {
      this.formDrag.data = item.formModule[item2Index]
      this.formDrag.index = item2Index
    },
    /* 表单运行拖拽 */
    formDragOver(event, item) {
      if (item.formModule.length > 2) {
        this.isDragover = true
      }
      event.preventDefault();
      event.dataTransfer.effectAllowed = "move";
    },
    /* 表单替换 记录的数据 和 要换位的数据 */
    formDragDrop(item, item2Index) {
      let _data = item.formModule[this.formDrag.index] // 记录的数据（第一个）
      let _formDrag = item.formModule[item2Index] // 要换位的数据(第二个数据)

      item.formModule[this.formDrag.index] = _formDrag // 把第一个数据换成第二个
      item.formModule[item2Index] = _data // 把第二个数据换成第一个
      console.log('form', item.formModule);
      // this.$forceUpdate()
    },
    /* 表单提交 */
    formSubmit(item,) {
      for (let i in this.lowCode.commonData) {
        if (this.lowCode.commonData[i].formModule[0].modType == '多选' && this.lowCode.commonData[i].formModule[0].modFillIn == true) {
          this.lowCode.commonData[i].formModule[0].modVal = this.lowCode.commonData[i].formModule[0].modValArray
        }
      }
      this.$refs[item.id][0].validate().catch(err => {
        // console.log(err);
      })
    },
    /* 移除表单规则 */
    formReset(item, item2) {
      for (let i in this.lowCode.commonData) {
        if (this.lowCode.commonData[i].formModule[0].modType == '多选') {
          this.lowCode.commonData[i].formModule[0].modVal = ''
        }
      }
      this.$refs[item.id][0].clearValidate()
    },
    /* 表单单选增加 */
    formRadioAdd(item2) {
      item2.modArray.push({ label: '' })
    },
    /* 表单多选增加 */
    formChcekboxAdd(item2) {
      item2.modArray.push({ label: '' })
    }
  }
}
</script>
